import React, {PropTypes} from "react";
import {
	View,
	Text,
	Image,
	TouchableOpacity,
	StyleSheet,
} from "react-native";

const propTypes = {
	text: PropTypes.string,
	source: Image.propTypes.source,
	onPress: PropTypes.func,
	textStyle: Text.propTypes.style,
	imgStyle: Image.propTypes.style,
}

const ImageButton = (({
	text,
	source,
	onPress,
	textStyle,
	imgStyle,
}) => (
	<TouchableOpacity onPress={onPress} style={styles.imgBtn}>
		<Image style={[imgStyle, styles.imgWidht]} source={source} />
		<Text style={[textStyle, styles.btnTtile]}>{text}</Text>
	</TouchableOpacity>
))

ImageButton.propTypes = propTypes;
ImageButton.defaultProps = {
	source: null,
}

const styles = StyleSheet.create({
	imgBtn: {
		width: gScreen.width/2-4,
		height: gScreen.width/2-4,
		alignItems: "center",
		backgroundColor: "red",
		margin: 1,
		shadowColor: gColor.bgColorOne,
		shadowOffset: {width: 20, height: 4},
		shadowOpacity: 0.8,
		shadowRadius: 10,
	},
	imgWidht: {
		width: "100%",
		height: "100%",
	},
	btnTtile: {
		position: "absolute",
		bottom: 25,
	}
})

export default ImageButton;